"use client"

import React from 'react'
import { cn } from '@/lib/utils'
import { useTheme } from '@/lib/themeContext'
import { ACCENT_COLORS } from '@/lib/themes'

interface LogoutButtonProps {
  onClick: () => void
  className?: string
}

export default function LogoutButton({ onClick, className }: LogoutButtonProps) {
  const { theme } = useTheme()
  const accent = ACCENT_COLORS[theme.accent]

  return (
    <button
      onClick={onClick}
      aria-label="Logout"
      className={cn(
        'group relative flex items-center justify-start overflow-hidden cursor-pointer transition-all duration-300 shadow-lg border border-white/20',
        'w-10 h-10 xl:w-12 xl:h-12 rounded-md xl:rounded-xl',
        'hover:w-24 xl:hover:w-32 hover:rounded-md xl:hover:rounded-xl active:scale-95',
        className,
      )}
      style={{ 
        background: `linear-gradient(135deg, ${accent.primary}, ${accent.primary}dd)`,
      }}
    >
      <div className="sign flex items-center justify-center w-full transition-all duration-300 group-hover:w-[35%] group-hover:pl-3">
        <svg viewBox="0 0 512 512" className="w-4 h-4" aria-hidden="true">
          <path
            fill="white"
            d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"
          />
        </svg>
      </div>
      <div className="text absolute right-0 w-0 opacity-0 text-white font-medium text-sm transition-all duration-300 group-hover:opacity-100 group-hover:w-[65%] group-hover:pr-3">
        Logout
      </div>
    </button>
  )
}
